<template>
	<div class="basic_data">
			<div class="basic_data_jb">
				<img src="../../../../../static/img/res_img/jbzl.png" class="basic_data_img"/>
				<span class="span1">基本资料</span>
				<span class="bitian">(必填)</span>
				<i-button  shape="circle" icon="ios-search" style="float: right;position: relative;top: 18px;" @click="handleBasic_data" v-show="basic_data"></i-button>
			</div>
		    <div  class="basic_data_il" v-show="basic_data1">
				<ul  class="basic_data_ul">
					<li><span class="li_span">出生日期：</span><span>{{dat}}</span></li>
					<li><span class="li_span">手机：</span><span>{{tel}}</span></li>
					<li><span class="li_span">邮箱：</span><span>{{email}}</span></li>
					<li><span class="li_span">国籍：</span><span>{{place}}</span></li>
					<li><span class="li_span">状态：</span><span>{{state}}</span></li>
				</ul>
			</div>
			<div  class="basic_data_il1" v-show="basic_data2">
				<ul  class="basic_data_ul1">
					<li class="li_li">
						<span class="li_span">出生日期：</span>
				        <Col span="12">
				            <DatePicker :options="eTimeOptions" :maxlength="20"  @on-change="eTimeChange" type="date" v-model="time"
		            					placement="bottom-end" placeholder="结束时间" style="width: 170px"></DatePicker>
				        </Col>
					</li>
					<li>
						<span class="li_span">手机：</span>
						<i-input v-model="b_tel" placeholder="请输入手机号..." maxlength="11" style="width: 170px"></i-input>
					</li>
					<li>
						<span class="li_span">邮箱：</span>
						<i-input v-model="b_email" placeholder="请输入邮箱..."  maxlength="20" style="width: 170px"></i-input>
					</li>
					<li>
						<span class="li_span">国籍：</span>
						<span>{{b_palce}}</span>
					</li>
					<li>
						<span class="li_span">状态：</span>
						<i-select v-model="basic_datam" style="width:170px">
					        <i-option v-for="item in basicData" :value="item.value">{{item.label}}</i-option>
					    </i-select>
					</li>
				</ul>
				<div class="basic_data_foot">
					<i-button type="primary" style="width: 100px; margin-right: 50px;" @click="SaveBasicClick">保存</i-button>
				    <i-button style="width: 100px;" @click="CancelBasicClick">取消</i-button>
				</div>
			</div>
		</div>
</template>
<script>
	import axios from 'axios'
	export default {
    	name: 'BaicDate',
        data () {
            return {
            	basic_data:true,
                basic_data1:true,
                basic_data2:false,
                dat:"",
                tel:"",
                email:"",
                place:"",
                state:"",
		        eTimeOptions: {}, //结束日期设置
		        etime: '',//结束日期model
		        b_tel:"",
		        b_email:"",
		        b_palce:"",
                ListData:[],
                time:"",
                basicData: [
                    {
                        value: '在职，看看新机会',
                        label: '在职，看看新机会'
                    },
                    {
                        value: '在职，寻找新工作',
                        label: '在职，寻找新工作'
                    },
                    {
                        value: '在职，暂无跳槽打算',
                        label: '在职，暂无跳槽打算'
                    },
                    {
                        value: '在职，正在找工作',
                        label: '在职，正在找工作'
                    }
                ],
                basic_datam: ""
            }
        },
        methods:{
        	load (){
			  axios.get('/static/mzx/detail.json').then(this.getCityInfoSucc)
			},
			getCityInfoSucc(res){
				res = res.data
				if(res.data){
					this.ListData = res.data.Basic
					this.dat=this.ListData.dat
					this.tel=this.ListData.tel
	            	this.email=this.ListData.email
	            	this.place=this.ListData.place
	            	this.state=this.ListData.state
				}
			},
			eTimeChange(e) { //设置结束时间
		        this.etime = e;
		        let eTime = this.etime ? new Date(this.etime).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
		        this.sTimeOptions = {
		          disabledDate(date) {
		            return date && date.valueOf() > eTime;
		          }
		        }
		    },
        	handleBasic_data(){
    			this.time=this.ListData.dat
				this.b_tel=this.ListData.tel
            	this.b_email=this.ListData.email
            	this.b_palce=this.ListData.place
            	this.basic_datam=this.ListData.state
            	this.basic_data1 = false,
				this.basic_data2 = true,
				this.basic_data  = false
				
            },
            SaveBasicClick(){
            	this.basic_data1 = true,
				this.basic_data2 = false,
				this.basic_data  = true,
				alert(this.etime)
            },
			CancelBasicClick(){
				this.basic_data1 = true,
				this.basic_data2 = false
				this.basic_data  = true
			}
		},
		mounted () {
			this.load();
		}
    }
</script>
<style>
	.basic_data{
		border-bottom: 1px dashed;
		padding-bottom: 30px;
		display: inline-block;
		width: 100%;
	}
	.basic_data_img{
		width: 40px;
		position: relative;
		top: 13px;
	}
	.basic_data_ul{
		list-style: none;
	}
	.basic_data_ul>li{
		float: left;
		width: 50%;
	}
	.li_span{
		width: 95px;
		display: inline-block;
		text-align: right;
		margin-top: 10px;
	}
	.basic_data_il{
		padding: 0 20px;
	}
	.basic_data_il1,.career_intention1{
		border: 1px solid #419BFE;
		border-top: 6px solid;
		margin-top: 20px;
		padding: 10px 20px;
		
	}
	.basic_data_ul1{
		list-style: none;
	}
	.basic_data_ul1>li{
		float: left;
		width: 50%;
	}
	.li_li>.ivu-col-span-12{
		margin-left: 100px;
	}
</style>